<template>
  <div class="wrapper">
    <swiper :options="swiperOption" class="swiper-container">
      <!-- slides -->
      <swiper-slide
        class="swiper-item"
      >
        <img  src="../../assets/swiper/swiper1.png" />
      </swiper-slide>
      <swiper-slide
        class="swiper-item"
      >
        <img  src="../../assets/swiper/swiper2.jpg" />
      </swiper-slide>
      <!-- Optional controls ,显示小点-->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>

export default {
  data () {
    return {
      swiperOption: {
        // 参数选项,显示小点
        pagination: '.swiper-pagination',
        // 循环
        loop: true,
        // 每张播放时长3秒，自动播放
        autoplay: 3000,
        // 滑动速度
        speed: 1000
        // delay:1000

      },
      // 三张轮播，使用变量循环
      swiperList: [
      
      ]
    }
  }
}
</script>

<style scoped lang="less">
.wrapper {
  overflow: hidden;
  width: 100%;
  height: 32.5rem;
}
img {
  width: 100%;
  height: 32.5rem;
  vertical-align: middle;
}
/deep/.swiper-pagination-bullet-active {
  background-color: #ff5e4e;
}
</style>
